<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mock数据服务</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <style>
        .add-btn {
            width: 100%;
            margin-top: 6px;
        }
        .new-mockdata {
            margin-top: 12px;
        }
        .h3 {
            color: #666;
        }
        .m12 {
            margin: 12px 0;
        }
    </style>
</head>
<body>
    <h3 class="h3">mock本地服务</h3>
    <div id="app">
        <!-- mock数据列表 -->
        <el-table
            :data="mockList"
            style="width: 100%">
            <el-table-column
                prop="method"
                label="请求方法"
                width="100">
            </el-table-column>
            <el-table-column
                prop="route"
                label="路由名称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="data"
                label="数据">
            </el-table-column>
            <el-table-column
                width="280"
                label="请求接口">
                <template slot-scope="scope">
                    <el-link target="_blank" :href="mockList[scope.$index].url" type="primary">{{mockList[scope.$index].url}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                width="120"
                label="接口延迟(ms)">
                <template slot-scope="scope">
                    <span>{{mockList[scope.$index].timeout || '无'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="180"
                fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" @click="emitMock(scope.$index)" size="small">编辑</el-button>
                    <el-button type="danger" @click="deleteMock(scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增按钮 -->
        <el-button plain="true"
            icon="el-icon-plus"
            class="add-btn"
            @click="addMock"
            >新增
        </el-button>
        <!-- 更新mock数据弹窗 -->
        <el-dialog
        title="设置mock信息"
        :visible.sync="editMock.isShow"
        width="50%">
            <el-input class="m12" type="input" placeholder="请输入延迟时间，单位ms" v-model="editMock.timeout">
                <template slot="prepend">接口延迟时间(ms)</template>
            </el-input>
            <el-input type="textarea"
                :autosize="{ minRows: 10, maxRows: 15}"
                v-model="editMock.data">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click.stop="editMock.isShow = false">取 消</el-button>
                <el-button type="primary" @click.stop="editComfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增mock数据弹窗 -->
        <el-dialog
        title="新增mock信息"
        :visible.sync="newMock.isShow"
        width="50%">
            <el-row style="margin-bottom: 16px">
                <span class="demonstration" style="margin-right: 12px">请求方式</span>
                <el-radio border size="medium" v-model="newMock.method" label="GET">GET</el-radio>
                <el-radio border size="medium" v-model="newMock.method" label="POST">POST</el-radio>
            </el-row>
            
            <el-input placeholder="请输入路由" v-model="newMock.route">
                <template slot="prepend">路由名称</template>
            </el-input>
            <el-input class="m12" placeholder="请输入延迟时间，单位ms" v-model="newMock.timeout">
                <template slot="prepend">接口延迟时间(ms)</template>
            </el-input>
            <el-input class="new-mockdata"
                placeholder="请输入正确的JSON格式内容" type="textarea"
                :autosize="{ minRows: 10, maxRows: 15}"
                v-model="newMock.data">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click.stop="newMock.isShow = false">取 消</el-button>
                <el-button type="primary" @click.stop="addConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                editingData: '',
                emitIndex: -1,
                mockList: [],
                dialogVisible: false,
                newMock: {
                    isShow: false,
                    route: '',
                    data: '',
                    method: 'GET',
                    timeout: '',
                },
                editMock: {
                    isShow: false,
                    data: '',
                    route: '',
                    index: -1,
                    timeout: 0,
                },
            },
            created() {
                axios.get('/mockservice_data')
                    .then(({data}) => {
                        this.originData = data;
                        this.mockList = this.formatData(data || []);
                    });
            },
            methods: {
                initNewMock(otherOptions) {
                    let initData = {
                        isShow: false,
                        route: '',
                        data: '',
                        method: 'GET',
                        timeout: '',
                    };
                    this.newMock = Object.assign({}, initData, otherOptions);
                },
                initEditMock() {
                    this.editMock = {
                        isShow: false,
                        data: '',
                        route: '',
                        timeout: '',
                        index: -1,
                    };
                },
                setEditMock(target, otherOptions) {
                    let newEdit = {
                        isShow: true,
                        data: target.data,
                        route: target.route,
                        timeout: target.timeout,
                    };
                    this.editMock = Object.assign({}, newEdit, otherOptions);
                },
                formatData(list) {
                    return list.map((item) => {
                        item.data = JSON.stringify(item.data, null, 4);
                        item.url = [location.origin, '/', item.route].join('');
                        return item;
                    });
                },
                emitMock(index) {
                    let item = this.mockList[index];
                    this.setEditMock(item, {
                        index,
                    });
                },
                editComfirm() {
                    let editMock = this.editMock;
                    let resultData;
                    try {
                        resultData = JSON.stringify(JSON.parse(this.editMock.data), null, 4);
                    } catch (e) {
                        this.$message.error('JSON格式不正确，请认真检查');
                        return;
                    }
                    this.updateItem(Object.assign({
                        route: editMock.route,
                        data: JSON.parse(resultData),
                        timeout: editMock.timeout,
                    }))
                        .then((res) => {
                            this.mockList[editMock.index].data = resultData;
                            this.mockList[editMock.index].timeout = editMock.timeout;
                            this.initEditMock();
                        });
                    
                },
                deleteMock(index) {
                    const mockItem = this.mockList[index];
                    axios.post('/mockservice_remove', {
                        route: mockItem.route,
                        method: mockItem.method,
                    }).then((res) =>{
                        this.mockList = this.mockList.filter((item) => item.route !== mockItem.route);
                    });
                },
                updateItem(data) {
                    return axios.post('/mockservice_update', {
                        ...data,
                    });
                },
                addMock() {
                    this.initNewMock({
                        isShow: true,
                    });
                },
                addConfirm() {
                    const {
                        route,
                        data,
                        method,
                        timeout,
                    } = this.newMock;
                    if (!route || !data) {
                        return this.$message.error('文本不能为空');
                    }
                    let mockDataParse;
                    try {
                        mockDataParse = JSON.parse(data);
                    } catch (e) {
                        this.$message.error('json格式错误，请认真检查');
                    }
                    axios.post('/mockservice_add_item', {
                        route,
                        data: mockDataParse,
                        method,
                        timeout,
                    }).then((res) => {
                        this.mockList.push({
                            route,
                            data,
                            method,
                            url: [location.origin, '/', route].join(''),
                        });
                        this.initNewMock();
                    });
                }
            }
        })     
    </script>
</body>
</html>